<template>
    <div>
        <el-table
          ref="multipleTable"
          style="width: 400px"
          :data="listData">
          <!-- 这里EUI官网有提供 -->
          <el-table-column
            type="selection"
            width="55"
            prop="id">
          </el-table-column>
          <el-table-column
            label="待办事项"
            width="250"
            prop="event">
            <template></template>
          </el-table-column>
          <el-table-column
            prop="states"
            label="删除"
            width="50">
            <el-button 
            size="mini" 
            type="danger" 
            icon="el-icon-delete" 
            circle
            slot-scope="item"
            @click="delItem(item.row.id)"
            ></el-button>
          <!-- 这里slot-scope 问老师 -->
          <!-- 这里 item.row.id 获取该item的当前行的id值 -->
          </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { mapState } from 'vuex' // 通过辅助函数获取获取state内的数据
    export default {
        data(){
            return {

            }
        },
        computed:{                                                                                                                                  
            ...mapState(['listData'])
            // 取值时传入 数组 或 对象 然后将结果放到computed中使用
        },
        methods:{
            delItem(id){
                // 删掉当前行的数据
                this.$store.dispatch('deleteItem',id)
            }
        }
    }
</script>

<style scoped>
</style>